<template>
	<div>
		<div class='prizeDrawSpace'>
	
		</div>
	<div class="prizeDraw">
		<div class="prizeDraw_top">
			<div class="prizeDraw_top_close">
				<div class class="prizeDraw_top_close_left">
					<image src="@/static/image/left.png" mode="" @click="backEvent()"></image>
				</div> 领取记录 <image src="@/static/image/close.png" mode="" class="closeImg" @click="closeDialog()"></image>
			</div>
			<div class="prizeDraw_top_title">
				红包标题：{{redName || ''}}
			</div>
			<scroll-view @scrolltolower="scrolltolower" :style="{height:scrollViewHeight+'rpx'}" :scroll-y="true"
				:scroll-with-animation="true">
				<div class="redCont_items" v-for="(ite,idx) in redPackList" :key="idx">
					<div class="redCont_items_left">
						<image :src="ite.avatar" mode=""></image>
					</div>
					<div class="redCont_items_cont">
						<div class="redCont_items_cont_top ex">
							{{ite.nickname || "-"}}
						</div>
						<div class="redCont_items_cont_bottom">
							{{ite.receiveTime | formatDate}}
						</div>
					</div>
					<div class="redCont_items_cont_price">
						<span>¥</span> {{ite.amount}}
					</div>
				</div>

				<div class="listSpace" v-if="redPackList.length <= 0 && loading">
					<list-space></list-space>
				</div>

				<div class="zj_space">

				</div>
			</scroll-view>
		</div>
	</div>
	</div>
</template>

<script>
	export default {
		filters: {
			formatDate(v) {
				const value = v * 1000
				const data = new Date(value);
				const month = data.getMonth() + 1;
				const day = data.getDate();
				const year = data.getFullYear();
				const hours = data.getHours();
				const minutes = data.getMinutes();
				const seconds = data.getSeconds();
				const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return formattedTime;
			}
		},
		data() {
			return {
				params: {
					page: 1,
					pageSize: 10,
					redPacketId: '1801433329883422720'
				},
				redPackList: [],
				scrollViewHeight: 812,
				total: 0,
				redName: '',
				checkType: 0,
				loading:false
			}
		},
		onLoad(opt) {
			if (opt.redPacketId) {
				this.params.redPacketId = opt.redPacketId
				this.redName = opt.redName || ''
			}
			this.getRedPacket()
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.redPackList = []
			this.loading = false
			this.getRedPacket()
		},
		methods: {
			closeDialog(){
				this.$utils.closeDialog(this)
				// uni.navigateBack()
			},
			scrolltolower(e) {
				if (this.redPackList.length < this.total) {
					this.params.page++
					this.getRedPacket()
				} else {
					uni.showToast({
						title: '已到底',
						icon: 'none'
					})
				}
				console.log('e.detail.scrollTop', e.detail.scrollTop)
			},
			async getRedPacket() {
				const {
					data
				} = await this.$request(this.$Api.redPacket + "/" + this.params.redPacketId, this.params, "get")
				// item.amount = parseFloat(item.amount / 100).toFixed(2);
				this.loading = true
				if(!data.data.item) return
				for (var i in data.data.item) {
					data.data.item[i].amount = parseFloat(data.data.item[i].amount / 100).toFixed(2);
				}
				this.redPackList = this.redPackList.concat(data.data.item)
				this.total = data.data.total
				uni.stopPullDownRefresh()
			},
			// 中奖名单
			winnersEvemt(ite) {

			},
			backEvent() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.prizeDraw {
		width: 100%;
		height: 992rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		overflow-y: hidden;
		// position: fixed;
		bottom: 0;
		left: 0;

		color: #464C5B;
		font-size: 28rpx;

		.redCont_items {
			display: flex;
			width: 100%;
			align-items: center;
			height: 146rpx;
			border-bottom: 2rpx solid #AEC0FE;
			padding: 0 32rpx;
			box-sizing: border-box;
			position: relative;

			.redCont_items_left {
				width: 68rpx;
				height: 68rpx;
				margin-right: 16rpx;

				image {
					min-width: 68rpx;
					border-radius: 50%;
				}
			}

			.redCont_items_cont {
				text-align: left;

				.redCont_items_cont_top {
					width: 500rpx;
					color: #1D2129;
					font-size: 28rpx;
					height: 40rpx;
					line-height: 40rpx;

				}

				.redCont_items_cont_bottom {
					margin-top: 8rpx;
					color: #8C8C8C;
					height: 34rpx;
					line-height: 34rpx;
					font-size: 24rpx;

				}

			}

			.redCont_items_cont_price {
				position: absolute;
				right: 32rpx;
				top: 5rpx;
				color: #FF5A5F;

				span {
					color: #8C8C8C;
				}
			}
		}







		.prizeDraw_top {
			width: 100%;
			height: 100rpx;
			position: relative;
			text-align: center;
			font-size: 32rpx;
			line-height: 100rpx;

			.prizeDraw_top_close {
				padding: 0 32rpx;
				box-sizing: border-box;
			}


			.prizeDraw_top_close_left {
				position: absolute;
				left: 20rpx;
				top: 10rpx;
				width: 44rpx;
				height: 44rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}


			.closeImg {
				position: absolute;
				right: 32rpx;
				top: 32rpx;
				width: 32rpx;
				height: 32rpx;
			}

		}


		.prizeDraw_top_title {
			width: 100%;
			height: 80rpx;
			font-size: 28rpx;
			color: #464C5B;
			text-align: left;
			font-weight: 500;
			line-height: 80rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
		}


		.prizeDraw_user_item_top {
			width: 100%;
			height: 110rpx;
			border-bottom: 1rpx solid #D7DDE4;
			display: flex;
			justify-content: flex-start;
			padding: 0 24rpx;
			box-sizing: border-box;
			align-items: center;

			.prizeDraw_user_item_top_left {
				width: 62rpx;
				height: 62rpx;
				margin-right: 16rpx;

				image {
					border-radius: 50%;
				}
			}

		}

		.prizeDraw_items_cont_items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40rpx;
			margin-top: 20rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			font-size: 24rpx;

			color: #8C8C8C;

			.prizeDraw_items_cont_items_left {
				width: 100%;
				display: flex;
				align-items: center;


				.color_blue {
					color: #295EFF;
				}

				.prizeDraw_items_cont_items_cont {
					width: 480rpx;
					text-align: left;
					color: #464C5B;
				}
			}

		}
		.listSpace{
				padding-top: 100rpx;
		}
	}
</style>
